<template>
	<view class="homepage">
		<!-- 头部模块 -->
		<view class="homepage-head">
			<view class="head-user_avatar">
				<image :src="personInfo.avatar ? personInfo.avatar : 'http://ftp.zhizhuedu.cn/images/logo/avatar.png'"></image>
			</view>
			<view class="head-info">
				<view class="nums">
					<view class="head-bean" @tap="linkBean">
						<view>粉丝</view>
						<view class="num" v-if="personInfo.fans_num < 10000">{{personInfo.fans_num}}</view>
						<view class="num" v-else>{{personInfo.fans_num / 10000}}w</view>
					</view>
					<view class="head-watch" @tap="linkWatch">
						<view>关注</view>
						<view class="num" v-if="personInfo.follow_num < 10000">{{personInfo.follow_num}}</view>
						<view class="num" v-else>{{personInfo.follow_num / 10000}}w</view>
					</view>
					<view class="head-zan" @tap='linkZan'>
						<view>获赞</view>
						<view class="num" v-if="personInfo.start_num < 10000">{{personInfo.start_num}}</view>
						<view class="num" v-else>{{personInfo.start_num / 10000}}w</view>
					</view>
					<navigator v-if="!user_id" hover-class="false" class="head-black" url="../homepage/my-blackList">
						<view>黑名单</view>
					</navigator>
				</view>
				<view class="head_type" v-if="user_id">
					<view class="head_follow_cancle" v-if="personInfo.follow_state == 1" @tap="follow">取消关注</view>
					<view class="head_follow" v-else @tap="follow">关注</view>
					<view class="head_icon" @tap="operation"><i class="iconfont1 iconxiaojiantou"></i></view>
				</view>
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="homepage-title">
			<view class="title-ageg">
				<i v-if="personInfo.sex == 1" class="iconfont1 iconnan"></i>
				<i v-else class="iconfont1 iconnv"></i>
			</view>
			<view class="title-area"><i class="iconfont1 iconweizhi-xian"></i>{{personInfo.pro}}{{personInfo.city}}{{personInfo.area}}</view>
		</view>
		<view class="homepage-write_brief" @tap="edit">
			<view class="write_cont" v-if="personInfo.autograph">{{personInfo.autograph}}</view>
			<view class="write_none" v-else>请填写个人简介</view>
		</view>

		<!-- 文章列表模块 -->
		<UniArticle :list="list" :status="status" :contentText="contentText" @islike="islike"></UniArticle>
		<!-- 蒙版操作 -->
		<view class="button" v-if="isShow" @tap="closeButton">
			<view class="buttonView">
				<view class="edit" @tap="inBlack">拉黑</view>
				<view class="cancle">取消</view>
			</view>
		</view>
		<!-- 违规提示 -->
		<view class="bottom" v-if="wrongList.length > 0" @tap="closeButton">
			<view class="deleteView" v-for="(item,index) in wrongList" :key="index">
				<view class="deleteTitle">您发布的<text v-if="item.type == 1">文章</text><text v-if="item.type == 2">作品</text>因<text class="reason">{{item.set_name}}</text>，被判定违规，扣{{item.points}}健康分。请尽快处理。</view>
				<view class="buttons">
					<text class="btn_cancle" @tap.stop="closeItem(item.dispose_id,index)">关闭</text>
					<text class="btn_yes" @tap="detail(item.article_id,item.dispose_id,item.type)">详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import UniArticle from './components/article.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	export default {
		components: {
			UniArticle,
			uniLoadMore
		},
		data() {
			return {
				isShow: false,
				list: [], //文章列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				user_id: '',
				wrongList: [], //违规消息列表
				personInfo: {}, //主页信息
				videoList: [], //视频列表
				black_state: 1 //拉黑状态 0为正常，1为拉黑
			}
		},
		onNavigationBarButtonTap() {
			this.$zapi.apiPost('user/video.User/UserFollowAdd', {form_id: this.user_id}).then(res => {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
				if(res.data.code == 200) {
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					webView.setTitleNViewButtonStyle(0, {
					    text: '\ue652',  
						color: '#FF9900'
					});
					// #endif
				}
				this.getPerson();
			})
		},
		/* 屏幕移动到一定距离如果没有关注，则出现关注图标 */
		onPageScroll: function(e) {
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			// #endif
			if (e.scrollTop >= 100) {
				// #ifdef APP-PLUS
				if(this.user_id && this.personInfo.follow_state != 1) {
					webView.setTitleNViewButtonStyle(0, {
					    text: '\ue652',  
						color: '#FFFFFF'
					}); 
				}
				// #endif
			} else {
				// #ifdef APP-PLUS
				if(this.user_id && this.personInfo.follow_state != 1) {
					webView.setTitleNViewButtonStyle(0, {
					    text: '\ue652',  
						color: '#FF9900'
					}); 
				} 
				// #endif
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onLoad(e) {
			if (e.user_id) {
				this.user_id = e.user_id;
				this.getBlack();
			} else {
				this.black_state = 0;
				this.getWrong();
			}
		},
		onShow() {
			if(!this.user_id) {
				this.getPerson();
			}
			this.getList();
		},
		methods: {
			/* 获取黑名单状态 */
			getBlack() {
				this.$zapi.apiPost('user/video.User/UserBlackState', {
					form_id: this.user_id
				}).then(res => {
					if (res.data.code == 200) {
						this.black_state = res.data.data.black_state;
						if (this.black_state == 0) {
							this.getWrong();
							this.getPerson();
						} else {
							uni.showModal({
								title: '提示',
								content: '对方处于您的黑名单中，无法查看对方任何信息',
								showCancel: false,
								confirmColor: '#FF9900',
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 2
										})
									} 
								}
							})
						}
					}
				})
			},
			/* 获取个人信息 */
			getPerson() {
				var url = '';
				var data = {}
				if (this.user_id) {
					url = 'user/video.User/UserHomeByFrom';
					data.form_id = this.user_id;
				} else {
					url = 'user/video.User/UserHomePage';
				}
				this.$zapi.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						this.personInfo = res.data.data;
						var index1= 0; //省的索引
						for(var i = 0; i< provinceData.length; i++) {
							if(provinceData[i].value == this.personInfo.provinec_id) {
								this.personInfo.pro = provinceData[i].label;
								index1 = i;
							}
						}
						var index2 = 0; // 市的索引
						for(var i = 0; i< cityData[index1].length; i++) {
							if(cityData[index1][i].value == this.personInfo.city_id) {
								this.personInfo.city = cityData[index1][i].label;
								index2 = i;
							}
						}
						for(var i = 0; i< areaData[index1][index2].length; i++) {
							if(areaData[index1][index2][i].value == this.personInfo.area_id) {
								this.personInfo.area = areaData[index1][index2][i].label;
							}
						}
						
						uni.setNavigationBarTitle({
							title: this.personInfo.nicheng
						})
					} else {
						this.personInfo = {};
					}
				})
			},
			/* 获取违规推送消息 */
			getWrong() {
				this.$zapi.apiPost('user/wisdom.Users/punishList').then(res => {
					if (res.data.code == 200) {
						this.wrongList = res.data.data;
					} else {
						this.wrongList = [];
					}
				})
			},
			/* 关闭当前违规提示 */
			closeItem(dispose_id) {
				this.$zapi.apiPost('user/wisdom.Users/punishLook', {
					dispose_id: dispose_id
				}).then(res => {
					if (res.data.code == 200) {
						this.getWrong();
					}
				})
			},
			/* 查看违规详情 */
			detail(article_id,dispose_id,type) {
				this.closeItem(dispose_id);
				this.isShow = false;
				uni.navigateTo({
					url: '../complain/be-reported?article_id=' + article_id + '&type='+type
				})
			},
			/* 关注 & 取消关注 */
			follow() {
				var url = '';
				if (this.personInfo.follow_state == 1) {
					url = 'user/video.User/UserFollowDel';
				} else {
					url = 'user/video.User/UserFollowAdd';
				}
				this.$zapi.apiPost(url, {
					form_id: this.user_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					this.getPerson();
				})
			},
			/* 获取文章列表 */
			getList() {
				if(this.page == 1) {
					this.list = [];
				}
				var data = {
					page: this.page,
					pagesize: 7
				}
				if (this.user_id) {
					data.user_id = this.user_id;
					data.is_check = 2;
				} else {
					data.is_user = 1;
				}
				this.$zapi.apiPost('user/wisdom.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getLeftTime(list[i].creat_time);
							list[i].content = list[i].content.replace(/&lt;videoSrc=/g, '<video src="');
							list[i].content = list[i].content.replace(/video&gt;/g,'"autoplay="true" loop="true" show-center-play-btn="true" show-play-btn="false"></video>');
							list[i].content = list[i].content.replace(/src=/g, 'style="max-width:100%;" src=');
							if (list[i].subhead_creat_time) {
								list[i].ftime = util.getLeftTime(list[i].subhead_creat_time);
							}
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 操作展开 & 收起 */
			operation() {
				this.isShow = !this.isShow;
			},
			/* 关闭弹窗 */
			closeButton() {
				this.isShow = false;
			},
			/* 跳转粉丝 */
			linkBean() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-bean?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-bean'
					})
				}
			},
			/* 跳转关注 */
			linkWatch() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-watch?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-watch'
					})
				}
			},
			/* 跳转赞*/
			linkZan() {
				if (this.user_id) {
					uni.navigateTo({
						url: '../homepage/my-zan?user_id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: '../homepage/my-zan'
					})
				}
			},
			/* 跳转修改简介 */
			edit() {
				if (!this.user_id) {
					uni.navigateTo({
						url: 'edit?text=' + this.personInfo.autograph
					})
				}
			},
			/* 加入黑名单 */
			inBlack() {
				this.$zapi.apiPost('user/video.User/BlackAdd', {
					form_id: this.user_id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if(res.data.code == 200) {
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000);
					}
				})
			},
			/* 点赞 */
			islike(data) {
				var type = data.type; // 0视频列表 1文章列表
				var index = data.index;
				var is_like = data.is_like;
				if (is_like == 2) {
					this.list[index].is_like = 0;
					this.list[index].likenum--;
				} else {
					this.list[index].is_like = 2;
					this.list[index].likenum++;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	// 头部
	.homepage-head {
		display: flex;
		justify-content: flex-start;
		padding: 28upx 20upx;
		align-items: center;
		background-image: linear-gradient(#FF9900, #FFAA00);
		background-size: 100%;

		view {
			color: #FFFFFF;
			text-align: center;
		}

		// 头像
		.head-user_avatar {
			font-size: 0;
			margin-right: 40upx;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}
		}

		.head-info {
			width: 100%;

			.nums {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 90%;

				.num {
					font-size: 34upx;
				}
			}

			.head_type {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.head_follow {
					background: #FFFFFF;
					width: 420upx;
					height: 60upx;
					color: #FF9900;
					border-radius: 30upx;
				}

				.head_icon {
					background: #FFFFFF;
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					border-radius: 30upx;

					.iconxiaojiantou {
						color: #FF9900;
						font-size: 32upx;
					}
				}

				.head_follow_cancle {
					width: 420upx;
					height: 60upx;
					line-height: 60upx;
					color: #FFFFFF;
					border-radius: 30upx;
					border: 2upx solid #FFFFFF;
				}

				// .head_follow_yes{
				// 	background: #FFFFFF;
				// 	width: 196upx;
				// 	height: 60upx;
				// 	line-height: 60upx;
				// 	color: #FF9900;
				// 	border-radius: 30upx;
				// }
			}
		}
	}

	// 推荐用户
	.recommend {
		width: 690upx;
		margin: 30upx auto;
		color: #999999;
		font-size: 26upx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.scroll-item {
			width: 220upx;
			height: 290upx;
			background: #FFFFFF;
			border-radius: 20upx;

			.tip {
				color: #999999;
				font-size: 26upx;
				text-align: center;
			}

			.follow {
				background: #FF9900;
				color: #FFFFFF;
				border-radius: 30upx;
				width: 144upx;
				height: 44upx;
				line-height: 44upx;
				text-align: center;
				margin-left: 38upx;
			}
		}
	}

	.scroll-item image {
		width: 120upx;
		height: 120upx;
		margin: 30upx 50upx 0;
	}

	// 标签
	.homepage-title {
		display: flex;
		padding: 30upx 20upx;
		background: #FFFFFF;

		.title-ageg,
		.title-area {
			margin-right: 10upx;
			padding: 0 20upx;
			border-radius: 24upx;
			background: #F3F3F3;
			line-height: 1;
			color: #666666;
			font-size: 26upx;
			display: flex;
			align-items: center;
		}

		.iconnan {
			color: #00ACFE;
		}

		.iconnv {
			color: #FC3CA9;
		}

		.iconweizhi-xian {
			color: #999999;
			margin-right: 10upx;
		}
	}

	// 个人简介
	.homepage-write_brief {
		background: #ffff;
		padding: 10px 20px;
	}

	.write_cont {
		color: #666666;
		font-size: 26upx;
	}

	.write_none {
		color: #CCCCCC;
		font-size: 26upx;
	}

	// tabs选项卡
	.homepage-tab {
		display: flex;
		padding-top: 10px;
		justify-content: space-around;
		background: #fff;

		.volist-tab {
			position: relative;
			padding-bottom: 20upx;
			font-size: 32upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		// 作品
		.volist-tab_active {
			color: #FF9900;
		}

		// 增加下划线
		.volist-tab_active:before {
			position: absolute;
			content: '';
			width: 36upx;
			height: 4upx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #FF9900;
		}

		// 文章
		.volist-tab2 {}
	}

	/* 底部弹窗 */
	.button {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.buttonView {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F6F6F6;
		border-radius: 42upx 42upx 0 0;
	}

	.buttonView view {
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
		border-top: 2upx solid #F6F6F6;
	}

	.buttonView view:first-child {
		border-radius: 40upx 40upx 0 0;
		border: none;
	}

	.cancle {
		margin-top: 30upx;
		border: none;
	}

	/* 违规弹窗 */
	.bottom {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.deleteView {
		position: fixed;
		width: 422upx;
		top: calc(50% - 200upx);
		left: calc(50% - 211upx);
		background-color: #FFFFFF;
		border-radius: 20upx;
	}

	.deleteTitle {
		color: #333333;
		font-size: 36upx;
		padding: 40upx;
		line-height: 1.4;
	}
	.deleteTitle text {
		display: inline;
	}
	.deleteTitle .reason {
		color: #999999;
		font-size: 36upx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 40upx 40upx;
	}

	.btn_cancle {
		color: #999999;
		font-size: 36upx;
	}

	.btn_yes {
		color: #FF9900;
		font-size: 36upx;
	}
</style>
